<template>
    <div class="content">
        <div class="allMessage">
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="messageId"
                    label="留言id"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="用户名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="message"
                    label="留言内容"
                    width="500"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    prop="uInfo"
                    label="用户信息"
                    width="100"
                    show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="140">
                <template scope="scope">
                    <el-button @click="deleteMessage(scope.row)" type="text" size="small">已查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        </div>
        <div>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="13"
                    layout="prev, pager, next"
                    :total="count">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    export default{
        data:function () {
            return {
                tableData:[],
                count:''
            }
        },
        methods:{
            //当前页发生变化时触发的事件
            handleCurrentChange(val) {
                console.log(`${val}`);
                this.$http.get(`http://localhost/api/getAllMessage/${val}`).then(function (result) {
                    if(`${val}` == 1){
                        this.tableData = result.body.slice(0,13);
                    }
                    else{
                        this.tableData = result.body;
                    }
                })
            },
            //获取前13条留言信息
            getAllMessage:function () {
                this.$http.get('http://localhost/api/getAllMessage/1').then(function (result) {
                    this.tableData = result.body.slice(0,13);
                    this.count = result.body.length;
                })
            },
            //已查看后删除该留言
            deleteMessage:function (row) {
                this.$http.post('http://localhost/api/deleteMessage',{messageId:row.messageId},{emulateJSON:true}).then(function (result) {
                    console.log(result);
                    this.getAllMessage();
                });
            }
        },
        created:function () {
            this.getAllMessage();
        }
    }
</script>
<style scoped>
    .content{
        width: 100%;
        padding: 20px;
    }
    .allMessage{
        height: 600px;
        margin-bottom: 10px;
    }
</style>